
var summary = 0;
window.onload = function () {
    show();
    sum();
    $(document).on('click', '.add', add);
    $(document).on('click', '.lose', lose);
    $(document).on('click', '.delete', deleteCar);
}
function show() {
    let arr = JSON.parse(localStorage.getItem('carGo'));
    // console.log(arr)
    $('#infoBody').html('');
    arr.forEach((val) => {
        // let i = 0;
        // console.log(val.id)
        $('#infoBody').append(`
          <tr data-count = '${val.id}'>
            <td class='center'>
            <input class = 'goods' type = 'checkbox' name = 'goods' data-count = '${val.id}'>
            </td>
            <td><img src="${val.img}" alt=""></td>
            <td class='center'>${val.name}</td>
            <td class='center'>${val.price}</td>
            <td class='center'>
            <button type = 'button' class='btn add btn-primary' data-count = '${val.id}'>+</button>
            <span class = 'counts'>${val.count}</span>
            <button type = 'button' class='btn lose btn-primary' data-count = '${val.id}'>-</button></td>
            <td class='center'>${val.detail}</td>
            <td class='center'>
                <span class='coin'>${val.count * val.price}</span>
            </td>
            <td class='center'>
                <button class = 'btn btn-danger delete' type = 'button' data-count = '${val.id}'>删除</button>
            </td>
          </tr>
     `)
        //  i++;
        // document.getElementsByClassName('btn')[0].firstElementChild
    })
    // console.log($('#infoBody>tr').get(3).getAttribute('data-count'))
    for (i = 0; i < $('.goods').length; i++) {
        let id = $('.goods').get(i).getAttribute('data-count')
        console.log(id)
        //  let arr = JSON.parse(localStorage.getItem('carGo'));
        for (n = 0; n < arr.length; n++) {
            if (id == arr[n].id) {
                // console.log($('#infoBody>tr').get(i).firstElementChild.firstElementChild)
                // console.log(arr[n].status)
                // console.log($('.goods').get(i))
                $('.goods').get(i).checked = arr[n].status;
            }
        }

    }

}
function add(e) {
    let id = $(e.target).attr('data-count')
    // console.log(id)
    let counts = 0;
    let arr = JSON.parse(localStorage.getItem('carGo'))
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
            counts = window.parseInt(arr[i].count) + 1;
            arr[i].count = counts;
            localStorage.setItem('carGo', JSON.stringify(arr));
            $('.counts').get(i).innerText = counts;
            $('.coin').get(i).innerText = counts * arr[i].price;
        }
    }

    sum();
}

function lose(e) {
    // window.alert(1)
    let id = $(e.target).attr('data-count')
    // console.log(id)
    let arr = JSON.parse(localStorage.getItem('carGo'));
    let counts = 0;
    counts = counts - 1;
    // console.log(counts)
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
            if (arr[i].count > 0) {
                counts = window.parseInt(arr[i].count) - 1;
                arr[i].count = counts;
                localStorage.setItem('carGo', JSON.stringify(arr));
                $('.counts').get(i).innerText = counts;
                $('.coin').get(i).innerText = counts * arr[i].price;
            }

        }
    }

    sum();
}

function sum() {
    summary = 0;
    for (i = 0; i < $('.goods').length; i++) {
        // console.log($('.goods').get(i).checked)
        // console.log($('.goods').length)
        if ($('.goods').get(i).checked) {
            let arr = JSON.parse(localStorage.getItem('carGo'))[i];
            // console.log(arr);
            summary = summary + arr.count * arr.price;
        }
    }
    $('.sum').get(0).innerText = summary;
}
function statusing(e) {
    let status = $(e.target).get(0).checked;
    let id = window.parseInt($(e.target).attr('data-count'));
    console.log(status)
    console.log(id)
    let arr = JSON.parse(localStorage.getItem('carGo'));
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
            arr[i].status = status;
            console.log(arr[id])
            localStorage.setItem('carGo', JSON.stringify(arr));
        }
    }
    sum();
}
$(document).on('change', '.goods', statusing);
$(document).on('click', '.all', statusAll);
$(document).on('click', '.inverse', statusInverse);

function statusAll() {
    let arr = JSON.parse(localStorage.getItem('carGo'))
    for (i = 0; i < $('.goods').length; i++) {
        $('.goods').get(i).checked = true;
        arr[i].status = true;
    }
    localStorage.setItem('carGo', JSON.stringify(arr));
    sum();
}
function statusInverse() {
    let arr = JSON.parse(localStorage.getItem('carGo'))
    for (i = 0; i < $('.goods').length; i++) {
        if ($('.goods').get(i).checked == true) {
            $('.goods').get(i).checked = false;
            arr[i].status = false;
        }
        else if ($('.goods').get(i).checked == false) {
            $('.goods').get(i).checked = true;
            arr[i].status = true;
        }
    }
    localStorage.setItem('carGo', JSON.stringify(arr));
    sum();
}
// function sum1(){
//     window.alert(1);
// }
// document.getElementsByClassName('sum')
function deleteCar(e) {
    let id = $(e.target).attr('data-count');
    console.log(id)
    let arr = [];
    let arr1 = JSON.parse(localStorage.getItem('carGo'));
    for (i = 0; i < arr1.length; i++) {
        if (arr1[i].id != id) {
            arr.push(arr1[i]);
        }
    }
    localStorage.setItem('carGo', JSON.stringify(arr));
    show();
    sum();
}